<template>
	<div class="mt-60px min-h-600px flex justify-center pb-50px">
		<div class="flex justify-center w-40%"
		v-if="step === 1" >
			<IdentityAuthentication @next="step = 2" />
		</div>
		<div v-if="step === 2" class="relative w-full">
			<DocumentVerification @next="step = 3" @back="step = 1"></DocumentVerification>
		</div>
		<div v-if="step === 3" class="relative w-full">
			<UploadDocument  @next="step = 4" @back="step = 2"></UploadDocument>
		</div>
		<div v-if="step === 4" class="relative w-full">
			<FacialDevices  @next="step = 5" @back="step = 3"></FacialDevices>
		</div>
		<div v-if="step === 5" class="relative w-full">
			<FaceVerification @next="step = 6" @back="step = 4"></FaceVerification>
		</div>
		<div v-if="step === 6" class="relative w-full">
			<FaceSuccess  @next="step = 7" @back="step = 5"></FaceSuccess>
		</div>
		<div v-if="step === 7" class="relative w-full">
			<ConfirmInformation @next="step = 8"></ConfirmInformation>
		</div>
		<div v-if="step === 8" class="relative w-full">
			<AuditResult @next="jumpTo('/')"></AuditResult>
		</div>
	</div>
</template>
<script lang="ts" setup>
import IdentityAuthentication from './components/IdentityAuthentication.vue';
import DocumentVerification from './components/DocumentVerification.vue';
import UploadDocument from './components/UploadDocument.vue';
import FacialDevices from './components/FacialDevices.vue';
import FaceVerification from './components/FaceVerification.vue';
import FaceSuccess from './components/FaceSuccess.vue';
import ConfirmInformation from './components/ConfirmInformation.vue';
import AuditResult from './components/AuditResult.vue';
import useJump from '@/utils/jump';

const { jumpTo } = useJump();
// 1、身份认证；2、证件认证；3,上传身份证;4,选择人脸设别
// 5,人脸验证;6,人脸认证成功;7确认个人信息;8审核结果
const step = ref<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8>(1);
</script>
